<template>
  <div class="indicator-check">
    <!-- <w-scrollbar wrap-class="scrollbar-wrapper"> -->
    <div style="background: rgb(236, 239, 247);height:20px;width:100%"></div>
    <div class="top-wrap">
      <w-date-picker :picker-options="pickerOptions" value-format="yyyy-MM" range-separator="至" start-placeholder="开始月份"
        end-placeholder="结束月份" v-model="dateValue" type="monthrange" @change="dateChange"></w-date-picker>
      <w-select v-model="yymc" placeholder="请选择" @change="yyKeyChange">
        <w-option v-for="item in yyKeyOptions" :key="item.yykey" :label="item.yymc" :value="item.yymc">
        </w-option>
      </w-select>
    </div>
    <div class="bottom-wrap">
      <div class="left">
        <p class="right-title" style="margin-bottom: 20px;">指标集</p>
        <div style="margin-bottom: 30px;text-align: right;width: 100%;">
          <w-input style="width:67%" placeholder="请输入指标名称" v-model="mzCost"></w-input>
          <w-button style="width:30%" type="primary" @click="query">查询</w-button>
        </div>
        <!-- <div :style="{'height': divHeight+'px','width':'400px','overflow':'scroll'}"> -->
        <el-scrollbar wrap-style="height:640px;margin-bottom:100px;">
          <w-tree ref='tree' :accordion="true" highlight-current :current-node-key="zbId" node-key="zbId" :data="treeData"
            :props="defaultProps" @node-click="handleNodeClick"></w-tree>
        </el-scrollbar>
        <!-- </div> -->
      </div>
      <!-- <div style="background: rgb(236, 239, 247);width:20px;height:100%"></div> -->
      <div id="right" class="right">
        <div class="right-top">
          <div class="right-top-sum">
            <div>
              <span>本期</span>
              <p>{{sumObj.bq?sumObj.bq:'无'}}</p>
            </div>
            <div>
              <span>同期</span>
              <p>{{sumObj.tq?sumObj.tq:'无'}}</p>
            </div>
            <div>
              <span>同比</span>
              <p>{{sumObj.tb?sumObj.tb:'无'}}</p>
            </div>
            <div>
              <span>当年</span>
              <p>{{sumObj.bl?sumObj.bl:'无'}}</p>
            </div>
          </div>
          <div class="right-top-echarts">
            <p class="right-title" style="margin: 20px 0;">{{startYear}}年{{startMonth}}月至{{endYear}}年{{endMonth}}月{{zbName}}</p>
            <div style="height:300px;width:80%;margin: 0 auto;" id="echarts1"></div>
          </div>
        </div>
        <div class="right-bottom">
          <p class="right-title" style="margin: 20px 0;">{{startYear}}年{{startMonth}}月至{{endYear}}年{{endMonth}}月科室{{zbName}}</p>
          <div class="bottom-table-wrap">
            <w-table max-height="240" :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
              <w-table-column sortable v-for="(item,index) in headTitle" :key="index" :prop="item" :label="item">
                <template slot-scope="scope">
                  <div v-if="item=='本期(人)'">
                    <div v-if="scope.row.trend == 0">
                      <span style="display: inline-block;width: 80px;">{{scope.row[item]}}</span>
                      <img src="../../static/img/down_arrow.png" style="vertical-align: middle;margin-right: 5px;" />
                    </div>
                    <div v-if="scope.row.trend == 1">
                      <span style="display: inline-block;width: 80px;">{{scope.row[item]}}</span>
                      <img src="../../static/img/up_arrow.png" style="vertical-align: middle;margin-right: 5px;" />
                    </div>
                  </div>
                  <div v-else>{{scope.row[item]}}</div>
                </template>
              </w-table-column>
            </w-table>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import {
    getCurrentMonth,
    getString
  } from '@/utils/index.js'
  export default {
    data() {
      return {
        sumObj: {},
        yykey: '',
        zbId: '',
        zbName: '',
        mzCost: '', //门诊费用
        defaultProps: {
          children: 'children',
          label: 'zbName'
        },
        yymc: '',
        zbflId: '',
        treeData: [],
        yyKeyOptions: [],
        divHeight: document.documentElement.clientHeight - 290,
        tableHeight: document.documentElement.clientHeight - 300,
        dateValue: [],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
          }
        },
        tableData: [],
        headTitle: [],
        startYear: '',
        endYear: '',
        startMonth: '',
        endMonth: '',
        legendData: [],
        xData: [],
        yData: [],
        yData1: [],
        t1: '',
        t2: '',
        zbInfo:''
      };
    },
    mounted() {

    },
    created() {
      var month = getCurrentMonth()
      this.dateValue = [month,month]
      this.startYear = getString(this.dateValue[0], 0)
      this.endYear = getString(this.dateValue[1], 0)
      this.startMonth = getString(this.dateValue[0], 1)
      this.endMonth = getString(this.dateValue[1], 1)
      this.getTreeData()

    },
    methods: {
      //日期切换事件
      dateChange(val) {
        this.dateValue = val
        this.startYear = getString(this.dateValue[0], 0)
        this.endYear = getString(this.dateValue[1], 0)
        this.startMonth = getString(this.dateValue[0], 1)
        this.endMonth = getString(this.dateValue[1], 1)
        this.getyyZs()
        this.getyyQs()
        this.getyyKs()
      },
      //获取涉及指标数据
      getTreeData() {
        this.$Http
          .post("etlProcedureIndicatorMap/findZbmxTree", {
            zbflId: this.zbflId,
            zbName: this.mzCost
          })
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.treeData = content
              this.zbId = content[0].children[0].zbId
              this.zbName = content[0].children[0].zbName
              // this.zbId = 'A001'
              this.getYykey()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //获取医院key
      getYykey() {
        this.$Http
          .get("indexDataCheck/getYykey")
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.yyKeyOptions = content
              if (content.length > 0) {
                this.yymc = content[0].yymc
                this.yykey = content[0].yykey
                this.getyyZs()
                this.getyyQs()
                this.getyyKs()
              }
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //查询
      query() {
        this.getTreeData()
      },
      yyKeyChange(val) {
        this.yyKeyOptions.map((item, index) => {
          if (item.yymc == val) {
            this.yykey = item.yykey
          }
        })
        this.getyyZs()
        this.getyyQs()
        this.getyyKs()
      },
      handleNodeClick(treeData) {
        if (!treeData.children) {
          this.zbId = treeData.zbId
          this.zbName = treeData.zbName
          this.getyyZs()
          this.getyyQs()
          this.getyyKs()
        }
      },
      getyyZs() {
        let param = {
          startTime: this.dateValue ? this.dateValue[0] : '',
          endTime: this.dateValue ? this.dateValue[1] : '',
          yykey: this.yykey,
          zbId: this.zbId,
          type: 'zs'
        }
        this.$Http
          .get("indexDataCheck/getIndexCardData", {
            params: param
          })
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.sumObj = content
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      getyyQs() {
        let param = {
          startTime: this.dateValue[0],
          endTime: this.dateValue[1],
          yykey: this.yykey,
          zbId: this.zbId,
          type: 'qs'
        }
        this.$Http
          .get("indexDataCheck/getIndexCardData", {
            params: param
          })
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.legendData = content.tList
              this.t1 = content.t1
              this.t2 = content.t2
              this.xData = content.xAxis
              this.yData = content.bqList
              this.yData1 = content.tqList
              this.getEcharts()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      getyyKs() {
        let param = {
          startTime: this.dateValue[0],
          endTime: this.dateValue[1],
          yykey: this.yykey,
          zbId: this.zbId,
          type: 'ks'
        }
        this.$Http
          .get("indexDataCheck/getIndexCardData", {
            params: param
          })
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.tableData = content.kvMaps;
              this.headTitle = content.head;
              // this.yyKeyOptions = content
              // if (content.length > 0) {
              //   this.yymc = content[0].yymc
              //   this.yykey = content[0].yykey
              // }
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      getEcharts() {
        // 第一个echarts
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("echarts1"));
        // 绘制图表
        var option = {
          color: ['#1AAFAB', '#0184ED'],
          legend: {
            data: this.legendData,
            right: 100,
            textStyle: {
              fontSize: 14,
              // color: 'rgba(255,255,255,1)'
            },
            itemHeight: 10, //改变圆圈大小
            itemWidth: 10, //改变圆圈大小
          },
          grid: { //直角坐标系内绘图网格
            left: "0",
            right: "32",
            bottom: "10",
            top: "10",
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },

          xAxis: {
            type: 'category',
            data: this.xData,
            // axisLine: {
            //   lineStyle: {
            //     color: "rgba(194,239,255,0.4)"
            //   }
            // },
            axisLabel: { //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: 40,
            },
          },
          yAxis: {
            // axisTick: {
            //   show: false
            // },
            // axisLine: {
            //   // lineStyle: {
            //   //   color: "rgba(194,239,255,0.4)"
            //   // },
            //   show: false
            // },
            splitLine: {
              show: false
            }
          },
          series: [{
            type: 'bar',
            name: this.t1,
            data: this.yData,
            barWidth: 6, //柱图宽度
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(55,193,254,0.4)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(31,140,223,1)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            }
          }, {
            type: 'bar',
            name: this.t2,
            data: this.yData1,
            barWidth: 6, //柱图宽度
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(193,254,65,0.4)'
                  }, {
                    offset: 1,
                    color: 'rgba(139,207,0,1)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            }
          }],
        };
        myChart.setOption(option);
        // 第一个echarts
      }
    },
  };
</script>

<style scoped lang="scss">
  .indicator-check {
    // padding: 0 15px;
    // box-sizing: border-box;
    // margin:0 20px;
    // margin: 20px;

    .top-wrap {
      background: white;
      margin-bottom: 12px;
      padding: 20px;
      box-sizing: border-box;
    }

    .bottom-wrap {
      display: flex;
      height: 100%;
    }

    .left {
      width: 22%;
      background: white;
      padding: 20px;
      box-sizing: border-box;
      height: 100%;
    }

    .right {
      width: 78%;
      // background: white;
      margin-left: 12px;
      // height: 100%;

      .right-top {
        background: white;
        margin-bottom: 12px;

        .right-top-sum {
          display: flex;
          padding: 15px 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #eee;

          div {
            width: 25%;
            border-right: 1px solid #eee;
            padding-left: 20px;
            box-sizing: border-box;

            span {
              color: #666;
              font-size: 14px;
            }

            p {
              font-size: 18px;
              margin-top: 10px;
            }
          }

          div:last-child {
            border-right: none;
          }
        }

      }

      .right-bottom {
        background: white;
        padding-top: 15px;
        height: calc(100% - 450px);

        .bottom-table-wrap {
          width: 85%;
          margin: 0 auto;
        }
      }
    }
  }
</style>
